<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { queryPageEnterpriseUserMgmt } from "@/api/User/Worker.js";
import { ElMessage } from "element-plus";
import { exportFile } from "@/utils/common";
const tableLoading = ref(false);
const seachTableRef = ref();
const router = useRouter();
const formInlines = ref();
const formInline = ref([
  {
    type: "input",
    prop: "nameOrPhone",
    placeholder: "员工姓名/手机号",
    label: "",
    model: "",
  },
  {
    type: "input",
    prop: "storeName",
    placeholder: "门店名称",
    label: "",
    model: "",
  },
  {
    type: "datePicker",
    prop: ["createTimeStart", "createTimeEnd"],
    startPlaceholder: "创建开始时间",
    endPlaceholder: "创建结束时间",
    label: "",
    model: [],
  },
]);
const btnLefts = ref([
  {
    label: "导出",
    plain: false,
    show: true,
    loading:false,
    img: new URL("@/assets/icon/btn-export.png", import.meta.url),
    style: "border-color:#0C268C;color:#0C268C",
    click: async () => {
      btnLefts.value[0].loading = true
      exportFile(
        "/jy-system/enterprise/user/mgmt/exportEnterpriseUser",
        "post",
        "人员管理",
        {},
        { ...formInlines.value, page: { size: 9999999, current: 1 } }
      ).then(res=>{
        ElMessage.success(res);
      }).catch(()=>{
        ElMessage.error(res);
      })
      .finally(()=>{
        btnLefts.value[0].loading = false
      })
     
    
    },
  },
]);
const tableConfig = ref([
  {
    prop: "employeeName",
    label: "员工姓名",
  },
  {
    prop: "storeName",
    label: "门店名称",
  },
  {
    prop: "userPhone",
    label: "手机号码",
  },
  {
    prop: "roleName",
    label: "角色",
  },
  {
    prop: "auditTime",
    label: "最新更新",
    minWidth: "100",
  },
  {
    type: "action",
    label: "操作",
    width: 100,
    btns: [
      {
        label: () => "查看",
        type: "primary",
        show: (row) => {
          return true;
        },
        click: async (row) => {
          router.push({
            name: "workerChildManageInfo",
            query: { uuid: row.id },
          });
        },
      },
    ],
  },
]);

const totalPage = ref(0);
const tableData = ref([]);

const handlerSearch = async (formInline) => {
  formInlines.value = formInline;
  tableLoading.value = true;
  try {
    const { records, total } = await queryPageEnterpriseUserMgmt(formInline);
    totalPage.value = Number(total);
    tableData.value = records;
    tableLoading.value = false;
  } catch (e) {
    tableLoading.value = false;
  }
};

const activeItem = ref();
const activeItemFun = (data) => {
  activeItem.value = data;
};

</script>

<template>
  <div class="page-content">
    <SeachTable
      :tableType="1"
      ref="seachTableRef"
      :forms="formInline"
      :btnLefts="btnLefts"
      :tableLoading="tableLoading"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :totalPage="totalPage"
      @handlerSearch="handlerSearch"
    >
    </SeachTable>
  </div>
</template>

<style lang="less" scoped></style>
